<template>
  <div ref="chartRef" style="width: 100%; height: 170px"/>
</template>

<script setup>
import {onMounted, watch} from "vue";
import {useEcharts} from "../../../../hook/ useEcharts";
import * as echarts from "echarts";

const {chartRef, initChart, updateChart} = useEcharts();
const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
});

const option = {
  tooltip: {
    show: false,
    formatter: "{a} <br/>{b} : {c}%",
  },
  series: [
    {
      name: "最外部进度条",
      type: "gauge",
      radius: "100%",
      center: ["center", "center"], // 仪表位置
      splitNumber: 100,
      axisLine: {
        lineStyle: {
          color: [
            [
              100,
              new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(145,207,255,0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(70, 155 ,240,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(70, 155 ,240,0.8)",
                },
              ]),
            ],
            [1, "#f00"],
          ],
          width: 10,
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      itemStyle: {
        show: false,
      },
      detail: {
        show: false,
      },
      pointer: {
        show: false,
      },
      animationDuration: 4000,
    },
    {
      name: "渐变数据环整个",
      type: "pie",
      radius: ["55%", "80%"],
      center: ["center", "center"],
      avoidLabelOverlap: false,
      startAngle: 210,
      color: [
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(66, 145, 226,0.9)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(66, 145, 226,0.3)", // 100% 处的颜色
            },
          ],
        },
        "transparent",
      ],
      hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
      legendHoverLink: false, //是否启用图例 hover 时的联动高亮。
      label: {
        normal: {
          show: false,
          position: "center",
        },
        emphasis: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: [
        {
          value: 66,
          name: "1",
          itemStyle: {
            borderWidth: 3,
            borderColor: "#4C7FDB",
          },
        },
        {
          value: 34,
          name: "2",
          itemStyle: {
            borderWidth: 0,
            borderColor: "transparent",
          },
        },
      ],
    },
    {
      name: "内部渐变线 ",
      type: "pie",
      radius: ["44%", "46%"],
      avoidLabelOverlap: false, //是否启用防止标签重叠策略
      startAngle: -30,
      hoverAnimation: false,
      legendHoverLink: false,
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        },
      },
      itemStyle: {
        normal: {
          color: ["#4497EA"],
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: [
        {
          value: 30,
          name: "1",
          itemStyle: {
            color: ["transparent"],
          },
        },
        {
          value: 60,
          name: "2",
        },
      ],
    },
    {
      name: "环形百分比",
      type: "pie",
      radius: ["55%", "80%"],
      avoidLabelOverlap: false,
      startAngle: -30,
      color: ["#114BFF52", "transparent", "transparent"],
      hoverAnimation: false,
      legendHoverLink: false,
      clockwise: false, //饼图的扇区是否是顺时针排布。
      itemStyle: {
        show: false,
        normal: {
          borderColor: "transparent",
          borderWidth: "20",
        },
        emphasis: {
          borderColor: "transparent",
          borderWidth: "20",
        },
      },
      z: 10,
      label: {
        normal: {
          show: false,
          position: "center",
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: [
        {
          value: ((100 - props.value) * 240) / 360,
          label: {
            normal: {
              formatter: props.value + "%",
              position: "center",
              show: true,
              textStyle: {
                fontSize: "23",
                fontWeight: "bold",
                color: "#ECFBFF",
              },
            },
          },
          name: "value1",
        },
        {
          value: 1,
          name: "value2",
        },
        {
          value: 100 - ((100 - props.value) * 270) / 360,
          name: "value3",
        },
      ],
    },
    {
      // 底部
      name: "两端线",
      type: "pie",
      radius: ["55%", "80%"],
      startAngle: 210,
      endAngle: -40,
      labelLine: {
        show: false,
      },
      z: 15,
      silent: true,
      label: {
        show: false,
      },
      data: [
        {
          value: 3,
          itemStyle: {
            color: "#4698EC",
          },
        },
        {
          value: 482,
          itemStyle: {
            color: "transparent",
          },
        },
        {
          value: 3,
          itemStyle: {
            color: "#4698EC",
          },
        },
        {
          value: 250,
          itemStyle: {
            color: "transparent",
          },
        },
      ],
    },
  ],
};

watch(() => {
  return props.value
}, (newVal) => {
  updateChart({
    series: [{
      name: "环形百分比",
      data: [{
        value: ((100 - newVal) * 240) / 360,
        name: "value1",
        label: {
          normal: {
            formatter: props.value + "%",
            position: "center",
            show: true,
            textStyle: {
              fontSize: "23",
              fontWeight: "bold",
              color: "#ECFBFF",
            },
          },
        },
      }, {
        value: 1,
        name: "value2",
      }, {
        value: 100 - ((100 - newVal) * 270) / 360,
        name: "value3",
      },],
    }]
  })
}, {deep: true})

onMounted(() => {
  // 初始化图表
  initChart(option);
});

</script>

<style scoped lang="scss">

</style>
